<script setup>
    import { onMounted } from 'vue'
	import { areaPositionIndex } from '@/utils/index'
	import zhouchengJson from '../../../assets/zhoucheng.json'

	const props = defineProps({
		townList: {
			type: Array,
			default: []
		}
	})
	
	const emit = defineEmits(['showList'])

	// 地图覆盖的颜色
	const mapColor = ['#136679', '#7E0523', '#C5AA00', '#239D26', '#DB009C', '#2C2880', '#136679', '#136679', '#7E0523', '#C5AA00', '#239D26', '#DB009C', '#2C2880', '#136679', '#7E0523', '#C5AA00', '#239D26', '#DB009C', '#2C2880', '#136679']

	// 创建Map实例
    let map = undefined


    onMounted(() => {
		map = new BMapGL.Map("container");            // 创建Map实例
        map.enableScrollWheelZoom();                           //启用滚轮放大缩小  
		var point = new BMapGL.Point(116.89256516241869,35.33010937826072);    // 创建点坐标
        map.centerAndZoom(point,12);                     // 初始化地图,设置中心点坐标和地图级别。

		for(let i = 0; i < props.townList.length; i++){
			let { townsName, counts, townsId } = props.townList[i]
			if(counts){
                let contour = []
				zhouchengJson.features[areaPositionIndex[townsName]].geometry.coordinates[0].map(item => {
                    contour.push(new BMapGL.Point(item[0], item[1]))
				})
				var polygon = new BMapGL.Polygon(contour, {strokeColor: mapColor[i], fillColor: mapColor[i], strokeWeight:3, strokeOpacity:0,fillOpacity:0.5,strokeStyle:'bold'});  
				map.addOverlay(polygon)

				// 鼠标点击区域
				polygon.addEventListener('click', function (e) {
					console.log(townsId)
					emit('showList', townsId)
				});
			}
		}	

    })

    // 点击区域 设置该区域地图中心点
    const setMapCenterPoint = (name) => {

        let pointArray = mapGetCenter(zhouchengJson.features[areaPositionIndex[name]].geometry.coordinates[0])

        // 创建点坐标
        var point = new BMapGL.Point(...pointArray);    

        // 初始化地图,设置中心点坐标和地图级别。
        map.centerAndZoom(point, 14);                   
    }

	 // 获取区域中间点
    const mapGetCenter = (pointArray) => {
        var sortedLongitudeArray = pointArray.map(item => item[1]).sort();//首先对经度进行排序，红色部分是array中经度的名称
        var sortedLatitudeArray = pointArray.map(item => item[0]).sort();//对纬度进行排序，红色部分是array中纬度的名称
        var centerLongitude = ((parseFloat(sortedLongitudeArray[0]) + parseFloat(sortedLongitudeArray[sortedLongitudeArray.length - 1])) / 2).toFixed(4);
        const centerLatitude = ((parseFloat(sortedLatitudeArray[0]) + parseFloat(sortedLatitudeArray[sortedLatitudeArray.length - 1])) / 2).toFixed(4);

        //如果经纬度在array中不是数字类型，需要转化为数字类型进行计算，如果是可以去掉parseFloat处理
        //console.log(centerLongitude+"kkk"+centerLatitude);
        return [centerLatitude, centerLongitude];
    }

    // 地图类型
    let mapType = [{ name: '地图', code: BMAP_NORMAL_MAP }, { name: '卫星', code: BMAP_SATELLITE_MAP }]
    let currentMapType = $ref('地图')
    const handleClickMapType = ({ name, code }) => {
        currentMapType = name
        map.setMapType(code);
    }

    defineExpose({
        setMapCenterPoint
    })

</script>

<template>
    <div class="project-map-wrap">
        <div id="container"></div>
        <div class="map-tabbar flex-center">
            <div
                v-for="(item, index) in mapType"
                :key="index"
                class="tabbar-item"
                :class="{ active: currentMapType == item.name }"
                @click="handleClickMapType(item)"
            >
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .project-map-wrap{
        width: 100%;
        height: 100%;
        // background: #fff;

        #container{
            width: 100%;
            height: 100%;
        }
    }
</style>